<template>
  <div>
    <button @click="stop">stop watch</button>
  </div>
</template>

<script>
import { watch, ref } from "@vue/composition-api";

export default {
  setup() {
    const count = ref(0);
    console.log('-----------------------');

    /** 1) 监视单个*/
    const stop = watch(
      count, //相较reactive数据,不用()=>
      (cur, prev) => {
        console.log(cur, prev);
        /*
            0 undefined ← 默认组件创建时会打印 除非你手动将lazy置为true
            1 0
          */
      },
      {
        // lazy: true
      }
    );

    setInterval(() => {
      count.value += 1;
    }, 3000);

    /** 可在这里也可在模板里调用*/
    // stop();

    return {
      stop,
      count
    }
  }
};
</script>

<style scoped></style>
